<?php
$session = $this->session->userdata('logged_in');
?>
<!DOCTYPE HTML>
<html>
    <head>
        <title>
            Hotel Management System
        </title>
		<link href="<?php echo base_url(); ?>public/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="<?php echo base_url(); ?>public/css/hms.css" rel="stylesheet" media="screen">
        <link href="<?php echo base_url(); ?>public/css/fullcalendar.css" rel="stylesheet" media="screen">
        <link href="<?php echo base_url(); ?>public/css/fullcalendar.print.css" rel="stylesheet" media="print">
        <link href="<?php echo base_url(); ?>public/css/datepicker.css" rel="stylesheet" media="screen">
        <link href="<?php echo base_url(); ?>public/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
        <link href="<?php echo base_url(); ?>public/css/custom-theme/jquery-ui-1.9.2.custom.css" rel="stylesheet" media="screen">
		
        <script src="<?php echo base_url(); ?>public/js/jquery.min.js"></script>
        <script src="<?php echo base_url(); ?>public/js/bootstrap.min.js"></script>
        <script src="<?php echo base_url(); ?>public/js/gcal.js"></script>
        <script src="<?php echo base_url(); ?>public/js/fullcalendar.min.js"></script>
        <script src="<?php echo base_url(); ?>public/js/bootstrap-datepicker.js"></script>
        <script src="<?php echo base_url(); ?>public/js/jquery-ui-1.9.2.custom.min.js"></script>
        <script src="<?php echo base_url(); ?>public/js/autoNumeric.js"></script>
        <script src="<?php echo base_url(); ?>public/js/bootstrap-datetimepicker.min.js"></script>
        <script src="<?php echo base_url(); ?>public/js/phpjs.js"></script>

        <?php if ($css_files) { ?>
            <?php foreach ($css_files as $file): ?>
                <link type="text/css" rel="stylesheet" href="<?php echo $file; ?>" />
            <?php endforeach; ?>
            <?php foreach ($js_files as $file): ?>
                <script src="<?php echo $file; ?>"></script>
            <?php endforeach; ?>
        <?php } ?>
    </head>
    <body>
        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span12">
					<h3>Choose Out of Order Room</h3>
					<ul class="pager">
					  <li class="previous">
						<a href="javascript:void(0)" onclick="prevMonth()">&larr; Prev</a>
					  </li>
					  <li><h3 id="month" style="display:inline;"></h3><input id="month-id" type="hidden">&nbsp;</li>
					  <li><h3 id="year" style="display:inline;"></h3><input id="year-id" type="hidden">&nbsp;</li>
					  <li><a href="javascript:void(0)" onclick="reload()"><i class="icon-refresh"></i></a></li>
					  <li class="next">
						<a href="javascript:void(0)" onclick="nextMonth()">Next &rarr;</a>
					  </li>
					</ul>
					
					<div class="">
						<table class="table table-bordered table-condensed avail-table">
							<tr>
								<th colspan="14">Information</th>
							</tr>
							<tr>
								<td class="checkin" style="width:20px;"></td>
								<td style="width:150px;min-width:150px;max-width:150px;">Check In</td>
								<td class="checkout" style="width:20px;"></td>
								<td style="width:150px;min-width:150px;max-width:150px;">Check Out / Available</td>
								<td class="booked" style="width:20px;"></td>
								<td style="width:150px;min-width:150px;max-width:150px;">Booked</td>
								<td class="outoforder" style="width:20px;"></td>
								<td style="width:150px;min-width:150px;max-width:150px;">Out of Order</td>
								<th style="width:20px;text-align:center;">R</th>
								<td>Ready</td>
								<th style="width:20px;text-align:center;">C</th>
								<td>Cleaning</td>
								<th style="width:20px;text-align:center;">D</th>
								<td>Dirty</td>
							</tr>
						</table>
					</div>
					
					<table id="avail-table" class="table table-bordered avail-table">

					</table>
					<a class="btn btn-warning" href="javascript:void(0)" onclick="choose_rooms()">Make Out of Order</a>
					<a class="btn btn-default" href="javascript:void(0)" onclick="window.close()">Close</a>
					<br><br>
                </div>
            </div>
        </div>
<script>
	
	var monthArr = ['', 'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
	var rate = 0;
	var room = 0;
	
    $(document).ready(function() {
		
		var now = new Date();
		var month = now.getMonth()+1;
		var year = now.getFullYear();
		
		$('#month-id').val(month);
		$('#month').text(monthArr[month]);
		$('#year-id').val(year);
		$('#year').text(year);
		
		get_data(month, year);
		
		$("#avail-table").delegate('td','mouseover mouseleave', function(e) {
		
			if (e.type == 'mouseover') {
			  $(this).parent().addClass("hover");
			  $("colgroup").eq($(this).index()).addClass("hover");
			}
			else {
			  $(this).parent().removeClass("hover");
			  $("colgroup").eq($(this).index()).removeClass("hover");
			}
		});
		
		$('td').tooltip({
			animation: true
		});

    });
	
	function get_data(month, year) {
		myApp.showPleaseWait();
		$.ajax().abort();
		
		$.ajax({
			type: "POST",
			dataType: 'json',
			url: "<?php echo site_url("room/load_room_ajax");?>",
			data: {'month': month, 'year': year},
			success: function(data){
				//console.log(data);
				render_table(data);
				myApp.hidePleaseWait();
			}
		});
	}
	
	function render_table(data) {
		
		$('#avail-table').empty();
		
		var month = parseInt($('#month-id').val());
		var year = parseInt($('#year-id').val());
		var now = new Date();
		
		//console.log(now.getFullYear());
		var days_number = parseInt(data['days_number']);
		var colgroup = '<colgroup></colgroup>';
		for(var i=0;i<days_number;i++){
			colgroup = colgroup + '<colgroup></colgroup>';
		}
		$('#avail-table').append(colgroup);
		
		var head = '<tr><th style="text-align:center;">Rooms / Days</th>';
		for(var i=0;i<days_number;i++){
			head = head + '<th style="text-align:center;">'+(i+1)+'</th>';
		}
		head = head + '</tr>';
		$('#avail-table').append(head);
		var room_type = data['room_type'];
		
		for(var i=0;i<room_type.length;i++) {
			var rooms = room_type[i]['rooms'];
			var type = '<tr><th>'+room_type[i]['room_type_name']+'</th>';
			for(var p=0;p<days_number;p++){
				type = type + '<td class="empty"></td>';
			}
			type = type + '</tr>';
			$('#avail-table').append(type);
			
			for(var j=0;j<rooms.length;j++) {
				var days = rooms[j]['days'];
				var td = '<tr><td>&nbsp;&nbsp;&nbsp;'+rooms[j]['room_number']+'</td>';
				
				for(var k=0;k<days.length;k++) {
					var resv = days[k];
					var date = year+'-'+month+'-'+(k+1);
					var room_stat = '';
					if(rooms[j]['room_status'] == 'Cleaning') room_stat = 'C';
					else if(rooms[j]['room_status'] == 'Dirty') room_stat = 'D';
					else room_stat = 'R';					
					
					if(resv['resv_status'] == 'Check In'){
						td = td + '<td class="checkin pointer" style="width:20px;" onclick="move_guest(event,'+resv['resv_room_id']+')" data-toggle="tooltip" title="Guest: '+resv['guest_name']+'<br>Phone: '+resv['guest_phone']+'">';
						if(k+1 == now.getDate() && month == (now.getMonth()+1) && year == now.getFullYear()) td = td + room_stat;
						td = td + '</td>';
					}
					else if(resv['resv_status'] == 'Booked') {
						td = td + '<td class="booked pointer" style="width:20px;" onclick="move_guest(event,'+resv['resv_room_id']+')" data-toggle="tooltip" title="Guest: '+resv['guest_name']+'<br>Phone: '+resv['guest_phone']+'">';
						if(k+1 == now.getDate() && month == (now.getMonth()+1) && year == now.getFullYear()) td = td + room_stat;
						td = td +'</td>';
					}
					else if(resv['resv_status'] == 'Out of Order') {
						td = td + '<td class="outoforder pointer" onclick="make_avail(event,'+resv['resv_room_id']+')" style="width:20px;">';
						td = td + '<input type="hidden" name="room_id" value="'+rooms[j]['room_id']+'"><input type="hidden" name="date" value="'+date+'">';						
						td = td + '</td>';
					}
					else if(resv['resv_status'] == 'Check Out') {
						td = td + '<td class="checkout pointer" style="width:20px;" onclick="clicked(event)">';
						td = td + '<input type="hidden" name="room_id" value="'+rooms[j]['room_id']+'"><input type="hidden" name="date" value="'+date+'">';
						if(k+1 == now.getDate() && month == (now.getMonth()+1) && year == now.getFullYear()) td = td + room_stat;
						td = td + '</td>';
					}
					else {
						td = td + '<td class="avail pointer" style="width:20px;" onclick="clicked(event)">';
						td = td + '<input type="hidden" name="room_id" value="'+rooms[j]['room_id']+'"><input type="hidden" name="date" value="'+date+'">';
						if(k+1 == now.getDate() && month == (now.getMonth()+1) && year == now.getFullYear()) td = td + room_stat;
						td = td + '</td>';
					}
					
				}
				td += '</tr>';
				$('#avail-table').append(td);
				$('td').tooltip();
			}
		}
		
		var foot = '<tr><th style="text-align:center;">Rooms \\ Days</th>';
		for(var i=0;i<days_number;i++){
			foot = foot + '<th style="text-align:center;">'+(i+1)+'</th>';
		}
		foot = foot + '</tr>';
		$('#avail-table').append(foot);
	}

   function prevMonth() {
		
		var c = confirm('Selected rooms will be lost, continue?');
		if(!c) return false;
		
		var month = parseInt($('#month-id').val());
		var year = parseInt($('#year-id').val());
		
		if(month == 1){
			month = 12;
			year = year - 1;
		}
		else {
			month = month - 1;
		}
		
		$('#month-id').val(month);
		$('#month').text(monthArr[month]);
		$('#year-id').val(year);
		$('#year').text(year);
		get_data(month, year);
   }
   
   function nextMonth() {
		
		var c = confirm('Selected rooms will be lost, continue?');
		if(!c) return false;
		
		var month = parseInt($('#month-id').val());
		var year = parseInt($('#year-id').val());
		
		if(month == 12){
			month = 1;
			year = year + 1;
		}
		else {
			month = month + 1;
		}
		
		$('#month-id').val(month);
		$('#month').text(monthArr[month]);
		$('#year-id').val(year);
		$('#year').text(year);
		get_data(month, year);
   }
   
   function reload() {
		var c = confirm('Selected rooms will be lost, continue?');
		if(!c) return false;
		
		var month = parseInt($('#month-id').val());
		var year = parseInt($('#year-id').val());
		
		get_data(month, year);
   }
   
   function clicked(e) {
		if($(e.target).hasClass('clicked')){
			$(e.target).removeClass('clicked');
		}
		else {
			$(e.target).addClass('clicked');
		}
		
   }
   
   
   function choose_rooms() {
		if($('.clicked').length == 0) {
			alert('Please choose room first');
			return false;
		}
		var c = confirm('Rooms will be Out of Order, continue?');
		if(!c) return false;
		myApp.showPleaseWait();
		$('.clicked').each(function() {
			//alert($(this).children('[name="room_id"]').val());
			//alert($(this).children('[name="date"]').val());
			var room_id = $(this).children('[name="room_id"]').val();
			var date = $(this).children('[name="date"]').val();
			make_ooo(this,room_id,date);
			//window.opener.choose_rooms(room_id, date);
			
		}); 
		alert('Rooms have been Out of Order')
		myApp.hidePleaseWait();
		//window.location.reload();
   }
   
	function make_ooo(cell, room_id, date) {
		$.post('<?php echo base_url(); ?>room/make_ooo/', {
            room_id: room_id,
            date: date,
        }, function(data) {
			if(data > 0){
				$(cell).removeClass('clicked').removeClass('avail').addClass('outoforder').removeAttr('onclick').attr('onclick', 'make_avail(event,'+data+')');
			}
        });
	}
	
	function make_avail(evt,resv_room_id) {
		var c = confirm('This room will be Available, continue?');
		if(!c) return false;
		
		$.post('<?php echo base_url(); ?>room/make_avail/', {
            resv_room_id: resv_room_id
        }, function(data) {
			if(data > 0){
				$(evt.target).removeClass('outoforder').addClass('avail').removeAttr('onclick').attr('onclick', 'clicked(event)');
			}
        });
	}
	
	function move_guest(evt, resv_room_id) {
		var c = confirm('Guest exist in this room. Guest must be moved first, continue?');
		if(!c) return false;
		window.open('<?php echo base_url();?>room/move_guest/'+resv_room_id,'', 'toolbar=no,location=no,menubar=no,scrollbars=yes,width='+(screen.width-10)+',height='+(screen.height-100));
	}
   
   var myApp;
	myApp = myApp || (function () {
		var pleaseWaitDiv = $('<div class="modal hide" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false"><div class="modal-header"><h3>Processing...</h3></div><div class="modal-body"><div class="progress progress-striped active"><div class="bar" style="width: 100%;"></div></div></div></div>');
		return {
			showPleaseWait: function() {
				pleaseWaitDiv.modal();
			},
			hidePleaseWait: function () {
				pleaseWaitDiv.modal('hide');
			},

		};
	})();
   
</script>
    </body>
</html>